<template>
	<view>
		<wyb-popup ref="popup" type="bottom" height="600" :maskClickClose="true" radius="0" :showCloseIcon="false">
			<view class="popup-content">
				<view class="popup_content_title">
					{{ pickerTittle }}
					<!-- iconfont icon-close  -->
					<view class="icon_top" @tap="handleSelect()">确认</view>
					<view class="icon_top2" @tap="handleHide()">取消</view>
				</view>
				<view class="dialog_search_box">
					<view class="cuIcon-search text-grey dialog_search_text"></view>
					<input type="text" @input="inputValue" v-model="input_value" :placeholder="placeholder" class="dialog_search_inp" />
				</view>
				<scroll-view scroll-y="true" class="select_item_box">
					<u-empty mode="list" v-if="!options.length" marginTop="30"></u-empty>
					<view
						class="select_item"
						:class="selectIndex == index ? 'select_item_active' : ''"
						hover-class="select_item_hover"
						@click="handleChange(data)"
						v-for="(data, index) in options"
						:key="index"
					>
						{{ data[keyName] }}
					</view>
				</scroll-view>
			</view>
		</wyb-popup>
	</view>
</template>

<script>
import wybPopup from './wyb-popup.vue';
export default {
	components: {
		wybPopup
	},
	props: {
		pickerList: {
			type: Array,
			default: () => []
		},
		pickerTittle: {
			type: String,
			default: '选择'
		},
		// key
		keyName: {
			type: String,
			default: 'name'
		},
		// value
		valName: {
			type: String,
			default: 'id'
		},
		// 当前选中id
		defaultValue: {
			type: String,
			default: ''
		},
		// 搜索  placeholder
		placeholder: {
			type: String,
			default: '输入关键词进行搜索'
		}
	},
	watch: {
		pickerList: {
			handler: function (val, oldVal) {
				this.list = val;
				this.options = val;
			},
			immediate: true,
			deep: true // 深度监听
		}
	},
	data() {
		return {
			input_value: '',
			list: [],
			options: [],
			selectIndex: '-1'
		};
	},
	onLoad() {},
	created() {
		this.options = this.list;
	},
	methods: {
		// 获取选中index
		getIndexFunc(value) {
			this.selectIndex = this.pickerList.findIndex((i) => {
				return value == i[this.valName];
			});
		},
		handleHide() {
			this.$refs.popup.hide();
			var a = this;
			setTimeout(() => {
				a.input_value = '';
				a.options = a.list;
			}, 100);
		},
		handleShow() {
			this.getIndexFunc(this.defaultValue);
			this.$refs.popup.show();
		},
		handleChange(item) {
			this.getIndexFunc(item[this.valName]);
		},
		handleSelect(item) {
			var a = this;
			a.$emit('confirm', this.selectIndex != '-1' ? this.pickerList[this.selectIndex] : '');
			a.$refs.popup.hide();
			setTimeout(() => {
				a.input_value = '';
				a.options = a.list;
			}, 100);
		},
		inputValue(e) {
			var a = this;
			var inputTxt = e.detail.value;
			a.options = [];
			if (inputTxt.length == 0) {
				a.options = a.list;
			} else {
				a.options = a.list.filter((o) => {
					return String(o[this.keyName]).indexOf(e.detail.value) >= 0;
				});
			}
		}
	}
};
</script>

<style lang="scss">
@import './iconfont.css';
.popup_content_title {
	padding-top: 30rpx;
	margin-bottom: 30rpx;
	text-align: center;
	margin-bottom: 30rpx;
	position: relative;
	font-size: 16px;
	color: #303133;
	.icon_top {
		position: absolute;
		top: 30rpx;
		right: 20rpx;
		font-size: 15px;
		color: #3c9cff;
	}
	.icon_top2 {
		position: absolute;
		top: 30rpx;
		left: 20rpx;
		font-size: 15px;
		color: #909193;
	}
}

.dialog_search_box {
	width: 680rpx;
	height: 70rpx;
	background-color: #f8f8f8;
	border-radius: 12rpx;
	margin: 0 auto;
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	.dialog_search_text {
		margin-left: 30rpx;
		font-size: 30rpx;
	}
	.dialog_search_inp {
		height: 70rpx;
		height: 70rpx;
		text-align: left;
		padding-left: 20rpx;
		width: 590rpx;
		font-size: 26rpx;
	}
}
.select_item_box {
	width: 750rpx;
	height: 380rpx;
	color: #333;
	.select_item {
		width: 680rpx;
		margin: 0 auto;
		padding: 16rpx 0;
		font-size: 14px;
		color: #303133;
		text-align: center;
	}
	.select_item_active {
		font-weight: bold;
		font-size: 16px;
	}
	.select_item_hover {
		background-color: #f2f2f2;
	}
}
</style>
